<template>
    <div id="mainScroll" class="introduction-container">
        <div class="introduction-title">
            <p>玩转随手拍，让门城更美好</p>
        </div>
        <div class="introduction-content">
            <div class="introduction-item ">
                <div class="item-head"><div class="item-icon-box"> <i class="nav-icon"></i></div><p class="item-head-content">什么是随手拍？</p></div>

                <div class="item-body">
                    随手拍是门头沟区政府为市民提供的可以随时随地为身边的一些事儿或现象表达夸赞、批评或者提出建议的服务模块，内容展示公开化、透明化，并且有相应的奖励规则来感激市民积极参与城市建设的行为。
                </div>
            </div>
            <div class="introduction-item ">
                <div class="item-head"><div class="item-icon-box"><i class="nav-icon"></i></div><p class="item-head-content">可以上传什么类型的内容？</p></div>

                <div class="item-body">
                    随手拍目前只支持图片和文字展示，只要图片和文字表达清晰、不违反社会主义价值观即可上传。
                </div>
            </div>
            <div class="introduction-item ">
                <div class="item-head"><div class="item-icon-box"><i class="nav-icon"></i></div><p class="item-head-content">“最美门城”、“社会警示”和“问题处理”版块儿有哪些区别？</p></div>

                <div class="item-body">
                    <p>这三个版块儿根据随手拍内容性质的不同进行分类。</p>

                    <p>“最美门城”版块儿，主要涉及参加公益活动类、反映好人好事类、分享生活体验类、精神或文化建设类传播正能量、积极向上的信息。</p>

                    <p>“社会警示”版块儿，主要涉及客服目前暂时不能解决的问题，例如，反映不文明现象类、实时信息反馈类等需要市民的力量和舆论的力量来解决的问题。</p>

                    <p>“问题处理”版块儿，主要涉及客服人员能够解决或者客服人员将问题及时反馈给相关部门解决的已经处理的问题的结果展示，主要包括：参与城市管理类和参与城市建设类等信息。</p>
                </div>
            </div>
            <div class="introduction-item ">
                <div class="item-head"><div class="item-icon-box"><i class="nav-icon"></i></div><p class="item-head-content">随手拍不予通过的信息？</p></div>

                <div class="item-body item-body-table">
                    <table class="wn-table">
                        <thead class="wn-table-head">
                        <tr>
                            <th class="col1">分类</th>
                            <th class="col2">详情</th>
                        </tr>
                        </thead>
                        <tbody class="wn-table-body">
                        <tr>
                            <td class="col1">干扰社会治安类信息</td>
                            <td class="col2">干扰社会安定有序的违法或者严重负面的信息</td>
                        </tr>
                        <tr>
                            <td class="col1">挑战道德底线类信息</td>
                            <td class="col2">违反社会主义价值观、违反群众正常道德观的信息</td>
                        </tr>
                        <tr>
                            <td class="col1">虚假或谣言类信息</td>
                            <td class="col2">信息不真实、散布不属实或者恶意攻击他人的信息</td>
                        </tr>
                        <tr>
                            <td class="col1">无用生活类信息</td>
                            <td class="col2">生活中的吐槽、心情日记等对门城变得更美好没有价值的信息</td>
                        </tr>
                        <tr>
                            <td class="col1">无效举报</td>
                            <td class="col2">图片模糊、图文不符、词不达意等信息；现实中无法解决的问题等</td>
                        </tr>
                        <tr>
                            <td class="col1">涉政信息</td>
                            <td class="col2">涉及政府工作人员行为的、涉及国家之间关系的信息</td>
                        </tr>
                        <tr>
                            <td class="col1">非北京信息</td>
                            <td class="col2">你懂得</td>
                        </tr>

                        </tbody>
                    </table>
                </div>
            </div>
            <div class="introduction-item ">
                <div class="item-head"><div class="item-icon-box"><i class="nav-icon"></i></div><p class="item-head-content">特别提示</p></div>

                <div class="item-body">
                    发布信息需尽量详细，特别是涉及反应不文明现象类、城市管理类和城市建设类信息，需要您提供尽量详细的时间、地点、事件的前因后果、内心的想法或者改进建议等，以及清晰的现场图片，以便于审核人员优先处理您的问题。
                </div>
            </div>
        </div>
    </div>
</template>
<style>
    .introduction-container{
        background: #FFFFFF;
    }
    .introduction-title{
        font-size: 22px;
        line-height: 26px;
        color: #000000;
        margin-top: 30px;
        margin-bottom: 20px;
        text-align: center;
        font-weight: bold;
        letter-spacing: 0;
    }
    .introduction-content .item-head{
        font-size: 16px;
        line-height: 20px;
        color: #000000;
        font-weight: bold;
        position: relative;
    }
    .introduction-content .item-head .item-icon-box{
        height: 18px;
        float: left;
        margin-top: 1px;
    }
    .introduction-content .item-head .item-head-content{
        padding: 0 15px 0 30px;
    }
    .introduction-content .item-body{
        padding: 15px 15px 25px 30px;
        font-size: 15px;
        color: #5C5C5C;
        line-height: 23px;
    }
    .introduction-item .nav-icon{
        display: block;
        width: 4px;
        height: 16px;
        background: #DF3031;
        margin: 0 11px 0 15px;
    }
    /*table列表*/
    .wn-table .wn-table-head{
        background: #F0F0F0;
        border-top: 1px solid #DDDEE3;
        font-size: 30px;
        line-height: 36px;
        letter-spacing: 0;
        color: #777E8C;
    }
    .wn-table .wn-table-head tr{
        text-align: center;
    }
    .wn-table .wn-table-head th{
        height: 72px;
        padding: 22px 0;
    }
    .wn-table .wn-table-body td{
        padding: 44px 30px;
        vertical-align: middle;
    }
    .wn-table .col1{
        width: 191px;
        border-right: 1px solid #DDDEE3;
        border-left: 1px solid #DDDEE3;
        border-bottom: 1px solid #DDDEE3;
    }
    .wn-table .col2{
        width: 471px;
        border-right: 1px solid #DDDEE3;
        border-bottom: 1px solid #DDDEE3;
    }
    .wn-table .wn-table-body tr{
        background: #FFFFFF;
        font-size: 30px;
        letter-spacing: 0;
        color: #000000;
        line-height: 42px;
        text-align: center;
    }
    .wn-table{
        width: 687px;
        -webkit-transform: scale(0.5);transform: scale(0.5);-webkit-transform-origin: left top;transform-origin: left top;
    }
    .item-body.item-body-table{
        height: 778px;
        overflow: hidden;
        padding-left: 15px;
    }

</style>
<script>
    export default{
        mounted() {
            this.$util.setTitle('随手拍攻略');
        },
      //销毁实例
      deactivated(){
        this.$destroy();
      },

    }
</script>
